import React, {useState} from "react";
import {Button, makeStyles} from "@rn-vui/themed";
import OverLayer from "../../components/OverLayer.tsx";
import {Text, View} from "react-native";
import {RootSiblingPortal} from "react-native-root-siblings";
import {useThemeColors} from "../../hooks/hooks.tsx";

const useStyles = makeStyles((theme) => ({
    container: {
        alignItems: 'center',
        flexDirection: 'row',
        columnGap: 20
    },
    buttonItem: {
        flex: 1,
    },
    button: {
        paddingVertical: 20
    },
    overlayer: {
        width: 500
    },
}));

interface DialogNoteProps {

}

const DialogNote = (props: DialogNoteProps, ref: any) => {
    const colors = useThemeColors();
    const styles = useStyles();
    const [notes, setNotes] = useState<string>('');
    const [visible, setVisible] = useState<boolean>(false);
    const callback = React.useRef<any>();

    const onPressButton = () => {
        setVisible(false);
        callback.current?.();
    }

    React.useImperativeHandle(ref, () => ({
        open: (notes: string, cb: any) => {
            callback.current = cb;
            setVisible(true);
            setNotes(notes);
        },
        close: () => {
            setVisible(false);
        }
    }));

    if (!visible) {
        return null;
    }

    return (
        <RootSiblingPortal>
            <OverLayer overlayStyle={styles.overlayer} onBackdropPress={() => setVisible(false)}>
                <View style={styles.container}>
                    <Text style={{fontSize: 24}}>{notes}</Text>
                </View>
            </OverLayer>
        </RootSiblingPortal>
    );
};

export default React.forwardRef(DialogNote);
